﻿<script src="../../../Desktop/server/server.js"></script>
<template>
   <div class="top">

        <div class="HH">
        <mt-button @click.native="popupVisible3 = true" style="width: 15%;height:30px;;float:left;margin-top:1%;background-color:#cccc99; ">
           <img style="width:100%;" src="../assets/sort.png">
        </mt-button>

        <div style="width:70%;height: 85%;background-color: #999933;margin:0 auto;opacity:0.4;" @click="gotoSort()">
         <img style="width: 9%; margin-top:2%;margin-left:-10%;" src="../assets/cha.png">
         <div style="font-size: 50%;margin-top:-7.5%;margin-left:10%;color:#ffffff;">搜索</div>
        </div>
        </div>

        <mt-popup v-model="popupVisible3" position="left" class="mint-popup-3" :modal="false">

             <mt-button @click.native="popupVisible3 = false" style="width: 15%;height:30px;;float:left;margin-top:-34%;background-color:#cccc99;" type="primary">
                <img style="width:100%;" src="../assets/sort.png">
             </mt-button>  
               <img src="../assets/touxiang.jpg" style="width:20%;margin-top:5%;border-radius:50%;">  
             <div>
                
                 <span style="border: 2px #cccc99 solid;width:5%;"></span>
                 <span style="margin-left:5%;"> {{username}}</span>
                 <span style="border:2px #cccc99 solid;width:5%;margin-left:5%;"></span>
             </div>

             <div style="background-color: #ffffff;width: 90%;height: 30px;margin-left:auto;margin-right: auto;margin-top:4%;">
                 <span style="margin-left:-35%;">简介：</span>
                 
             </div>

             <div style="background-color: #ffffff;width: 90%;height: 30px;margin-left:auto;margin-right: auto;margin-top:4%;">
                 <span>收藏书籍：0</span>
                 <span style="margin-left: 10%;">已借数目:0</span>
                 <span style="margin-left: 10%;">逾期未还：0</span>
             </div>
       </mt-popup>

       <div class="topDiv">

           <img src="../assets/index/logo.png"   style= "margin-top:10%;width:96.5%;">


       </div>

       <div class="topDiv2">

          <mt-button class="mt1" v-on:click="toXiana()">热门借阅</mt-button>
          <mt-button class="mt2" v-on:click="toXianb()">热门收藏</mt-button>
          <mt-button class="mt3" v-on:click="toXianc()">新书入库</mt-button>

       
       <div class="topDiv3" v-if="showa">
            <div v-for="(item,index) in book_name" class="topImg" @click="togo(index)">

                       <img :src="getbook_ico(index)" alt="">

                 <div>{{book_name[index]}}</div>

             </div>

      </div>

      <div class="topDiv3" v-if="showb">
            <div v-for="(item,index) in book_name" class="topImg" @click="togo1(index)">

                       <img :src="getbook_ico1(index)" alt="">

                 <div>{{book_name1[index]}}</div>

             </div>

      </div>

      <div class="topDiv3" v-if="showc">
            <div v-for="(item,index) in book_name" class="topImg" @click="togo2(index)">

                       <img :src="getbook_ico2(index)" alt="">

                 <div>{{book_name2[index]}}</div>

             </div>

      </div>


    </div>
   </div>
</template>

<script>
    export default{
        data(){
            return{
                book_name:[
                    "自在独行","浮生六记","沉默的大多数","沉默的大多数","撒哈拉的故事","你是人间的四月天","当我跑步时我谈些什么","皮囊"
                ],
                book_name1:[
                    "皮囊","当我跑步时我在想什么","你是人间的四月天","撒哈拉的故事","沉默的大多数","沉默的大多数","浮生六记","自在独行"
                ],
                book_name2:[
                    "撒哈拉的故事","自在独行","你是人间的四月天","浮生六记","皮囊","沉默的大多数","沉默的大多数","当我跑步时我谈些什么"
                ],
                book_ico:[
                    "./src/assets/book/s01.jpg",
                    "./src/assets/book/s02.jpg",
                    "./src/assets/book/s03.jpg",
                    "./src/assets/book/s04.jpg",
                    "./src/assets/book/s05.jpg",
                    "./src/assets/book/s06.jpg",
                    "./src/assets/book/s07.jpg",
                    "./src/assets/book/s08.jpg"

                ],
                book_ico1:[
                    "./src/assets/book/s08.jpg",
                    "./src/assets/book/s07.jpg",
                    "./src/assets/book/s06.jpg",
                    "./src/assets/book/s05.jpg",
                    "./src/assets/book/s04.jpg",
                    "./src/assets/book/s03.jpg",
                    "./src/assets/book/s02.jpg",
                    "./src/assets/book/s01.jpg"
                ],
                book_ico2:[
                    "./src/assets/book/s05.jpg",
                    "./src/assets/book/s01.jpg",
                    "./src/assets/book/s06.jpg",
                    "./src/assets/book/s02.jpg",
                    "./src/assets/book/s08.jpg",
                    "./src/assets/book/s03.jpg",
                    "./src/assets/book/s04.jpg",
                    "./src/assets/book/s07.jpg"
                ],
                book_engName:[
                     "booo_1","booo_2","booo_3","booo_4","booo_5","booo_6","booo_7","booo_8"
                ],
                book_engName1:[
                    "booo_8","booo_7","booo_6","booo_5","booo_4","booo_3","booo_2","booo_1"
                ],
                book_engName2:[
                     "booo_5","booo_1","booo_6","booo_2","booo_8","booo_3","booo_4","booo_7"
                ],
                popupVisible3: false,
                showa: true,
                showb: false,
                showc: false,
                username:''
            }
        },
           mounted(){
            this.getUser();

        },
        methods:{
            getbook_ico(i){
                return this.book_ico[i];
            },
            getbook_ico1(i){
                return this.book_ico1[i];
            },
            getbook_ico2(i){
                return this.book_ico2[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                this.$store.commit("choosebooks",id);
                this.$router.push({path:"booksView"});
            },
            gotoSort(){
                this.$router.push({path:"bookrack"});
            },
             togo(index){
                var id=this.book_engName[index];
                this.go(id);
            },
            togo1(index){
                var id=this.book_engName1[index];
                this.go(id);
            },
            togo2(index){
                var id=this.book_engName2[index];
                this.go(id);
            },
            toXiana:function(){
                if(this.showa == true){
                    this.showa = true;
                }else{
                    this.showa = true;
                    this.showb = false;
                    this.showc = false;
                }
            },
            toXianb:function(){
                if(this.showb == true){
                    this.showb = true;
                }else{
                    this.showb = true;
                    this.showa = false;
                    this.showc = false; 
                }
            },
            toXianc:function() {
                if(this.showc == true){
                    this.showc = true;
                }else{
                    this.showc = true;
                    this.showa = false;
                    this.showb = false;
                }
            },
                  getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid
                        console.log(_this.username);
                       

                    }
                })
               
            },
            logout(){
                var _this = this;
                _this.$http.post('/users/logout').then(function (res) {
                    if (res.data.result == 0) {
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        _this.username = '';
                        _this.$router.push('/login/login');
                    }
                })
            },
        }
    }
</script>

<style>
    .top{

        height: auto;
        padding-top:5%;
        padding-bottom:150%;

    }


    .topDiv{
        border-top:10px solid #CCCC99;
        border-bottom:10px solid #CCCC99;
        background-color: #faf3ff;
        height: auto;
        margin-top:5%;
        margin-bottom: 2%;
        padding-bottom:7%;

    }
    .topDiv2{

        height:auto;
        width:100%;
        background-color: #ffffff;

    }
      .mt1 {
       background-color: #003300; 
       
       margin-top:2%;
       margin-right:5%;
       color:white;
       font-size:100%;
       
   }

   .mt2 {
       background-color: #003366; 
       
       margin-top:2%;
       margin-right:5%;
       color:white;
       font-size:100%;
   }

   .mt3 {
       background-color: #663300; 
       
       margin-top:2%;
       color:white;
       font-size:100%;
   }


    .topImg {
        width:23%;
        height: 150px;
        float: left;
        font-family: 华文行楷;
        font-size: 0.8em;
        margin-left:1.5%;
        margin-top:5%;



    }

    .topImg>img {

        width:85%;
        height: auto;
    }

         .mint-popup-3 {
        width: 100%;
        height: 30%;
        background-color: #fff;
        margin-top:-50%;
        
      }

      .mint-popup-3 .mint-button {
        position: absolute;
        width: 15%;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        margin-top:-33.5%;
        margin-left:-5%;
        background-color:#cccc99;
        text-align: center;
      }

      .HH {
        background-color: #CCCC99;
        width: 100%;
        height: 46px;
        margin-top:-6%;
        padding: 1% 0 0 0;
      }

      .lid {
          height: 2px;
          border-top: 2px solid #CCCC99;
      }


</style>